<template>
  <div class="workflow-container">
    <div class="workflow-header" v-if="title">
      <h2 class="text-2xl font-bold text-gray-800 mb-2">{{ title }}</h2>
      <p class="text-gray-600 mb-6">{{ description }}</p>
    </div>
    
    <div class="workflow-steps">
      <div class="step-indicators flex justify-between relative mb-10">
        <div class="progress-line absolute top-1/2 left-0 w-full h-1 bg-gray-200 -translate-y-1/2 z-0"></div>
        <div class="progress-line-completed absolute top-1/2 left-0 h-1 bg-primary -translate-y-1/2 z-10" 
             :style="{ width: ((currentStep - 1) / (steps.length - 1) * 100) + '%' }"></div>
        
        <div 
          v-for="(step, index) in steps" 
          :key="step.id || index"
          class="step-indicator relative z-20 flex flex-col items-center cursor-pointer"
          :class="{ 'active': index === currentStep - 1, 'completed': index < currentStep - 1 }"
          @click="goToStep(index + 1)"
        >
          <div class="step-circle w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300">
            <span v-if="index < currentStep - 1" class="text-white">
              <i class="fa fa-check"></i>
            </span>
            <span v-else>{{ index + 1 }}</span>
          </div>
          <div class="step-label mt-2 text-sm font-medium text-center transition-colors duration-300">
            {{ step.title }}
          </div>
        </div>
      </div>
      
      <div class="step-content">
        <component 
          :is="currentComponent" 
          :step-data="steps[currentStep - 1].data || {}"
          @next="nextStep"
          @prev="prevStep"
          @complete="completeWorkflow"
        ></component>
      </div>
      
      <div class="workflow-actions flex justify-between mt-8" v-if="showActions">
        <button 
          v-if="currentStep > 1"
          class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors duration-300"
          @click="prevStep"
        >
          <i class="fa fa-arrow-left mr-2"></i>上一步
        </button>
        
        <button 
          v-if="currentStep < steps.length"
          class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-300"
          @click="nextStep"
        >
          下一步<i class="fa fa-arrow-right ml-2"></i>
        </button>
        
        <button 
          v-if="currentStep === steps.length"
          class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-300"
          @click="completeWorkflow"
        >
          完成<i class="fa fa-check ml-2"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Workflow',
  props: {
    steps: {
      type: Array,
      required: true,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    initialStep: {
      type: Number,
      default: 1
    },
    showActions: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentStep: this.initialStep
    };
  },
  computed: {
    currentComponent() {
      return this.steps[this.currentStep - 1].component;
    }
  },
  methods: {
    nextStep() {
      if (this.currentStep < this.steps.length) {
        this.currentStep++;
        this.$emit('step-change', this.currentStep);
      }
    },
    prevStep() {
      if (this.currentStep > 1) {
        this.currentStep--;
        this.$emit('step-change', this.currentStep);
      }
    },
    goToStep(stepIndex) {
      if (stepIndex >= 1 && stepIndex <= this.steps.length) {
        this.currentStep = stepIndex;
        this.$emit('step-change', this.currentStep);
      }
    },
    completeWorkflow() {
      this.$emit('complete');
    }
  }
}
</script>

<style scoped>
.workflow-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.step-indicator {
  flex: 1;
}

.step-circle {
  background-color: white;
  border: 2px solid #e2e8f0;
  color: #94a3b8;
}

.step-circle:hover {
  transform: scale(1.05);
}

.active .step-circle {
  background-color: #dbeafe;
  border-color: #3b82f6;
  color: #3b82f6;
}

.completed .step-circle {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.step-label {
  color: #94a3b8;
}

.active .step-label {
  color: #3b82f6;
}

.completed .step-label {
  color: #1e293b;
}

.step-content {
  min-height: 200px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

.workflow-actions button {
  outline: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.workflow-actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>  